<template>
  <view class="page flex-col">
    <view class="group_5 flex-col">
      <view class="group_3 flex-row">
        <view class="image-wrapper_1 flex-col">
          <image
            class="label_8"
            referrerpolicy="no-referrer"
            :src="user_header"
          />
        </view>
        <view class="text-group_10 flex-col">
          <text class="text_4">姓名</text>
          <text class="text_5">{{ name }}</text>
        </view>
        <image
          class="label_2"
          referrerpolicy="no-referrer"
          src=""
        />
      </view>
      <view class="group_4 flex-col">
        <view class="list_3 flex-row">
          <view
            class="text-group_11 flex-col"
            v-for="(item, index) in loopData0"
            :key="index"
          >
            <text class="text_6" v-html="item.lanhutext0"></text>
            <text class="text_7" v-html="item.lanhutext1"></text>
          </view>
        </view>
      </view>
    </view>
    <view class="block_3 flex-col">
      <view class="list_4 flex-col">
        <view
          class="list-items_1 flex-row justify-between"
          v-for="(item, index) in loopData1"
          :key="index"
          @click="switchMenu(item.lanhutext0)"
        >
          <view class="image-text_8 flex-row justify-between">
            <image
              class="thumbnail_5"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage0"
            />
            <text class="text-group_3" v-html="item.lanhutext0"></text>
          </view>
          <view class="image-text_9 flex-row justify-between">
            <text class="text-group_4" v-html="item.lanhutext1"></text>
            <image
              class="thumbnail_10"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage1"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="text-wrapper_2 flex-col" @click="showPopup('loginout')">
      <text class="text_8">退出登录</text>
    </view>
    <!-- 弹窗 -->
    <uni-popup ref="popup"
      background-color="#fff"
      borderRadius="12px 12px 0px 0px"
      :mask-click="false">
      <view class="popup-content" v-if="popupType === 'loginout'">
        <view class="popup-header">
          退出登录
          <view class="close-icon" @click="closePopup">
            <image
              class="close-icon-image"
              referrerpolicy="no-referrer"
              src="./img/close.png"
            />
          </view>
        </view>
        <view class="popup-body">
          <view class="login-out-btn" @click="loginOut">退出登录</view>
        </view>
      </view>
      <view class="popup-content" v-if="popupType === 'language'">
        <view class="popup-header">
          请选择语言
          <view class="close-icon" @click="closePopup">
            <image
              class="close-icon-image"
              referrerpolicy="no-referrer"
              src="./img/close.png"
            />
          </view>
        </view>
        <view class="lan-box">
          <view class="lan-select">
            <view class="lan-select-item"
              :class="language == item.value ? 'active' : ''"
              v-for="item in lanList"
              @click="changeLanguage(item.value)">
              {{ item.label }}
            </view>
          </view>
          <view class="lan-btn" @click="comfirmLan">确定</view>
        </view>
      </view>
    </uni-popup>
    <tabBar :tabIndex="4" v-if="showTabBar"></tabBar>
  </view>
</template>
<script>
import icon_6 from './img/icon-6.png'
import icon_3 from './img/icon-3.png'
import icon_1 from './img/icon-1.png'
import icon_2 from './img/icon-2.png'
import icon_4 from './img/icon-4.png'
import icon_5 from './img/icon-5.png'
import right_icon from './img/right.png'
import defaultHeader from './img/default-header.png'

export default {
  data() {
    return {
      name: '测试',
      user_header: defaultHeader,
      loopData0: [
        { lanhutext0: '99', lanhutext1: '完成作业' },
        { lanhutext0: '99', lanhutext1: '自主练习' },
        { lanhutext0: '99', lanhutext1: '我的班级' },
      ],
      loopData1: [
        {
          lanhuimage0: icon_6,
          lanhutext0: '实验记录',
          lanhutext1: '2 条',
          lanhuimage1: right_icon,
        },
        {
          lanhuimage0: icon_3,
          lanhutext0: '我的班级',
          lanhutext1: '2 个',
          lanhuimage1: right_icon,
        },
        {
          lanhuimage0: icon_4,
          lanhutext0: '个人信息',
          lanhutext1: '去编辑',
          lanhuimage1: right_icon,
        },
        {
          lanhuimage0: icon_1,
          lanhutext0: '系统语言',
          lanhutext1: '简体中文',
          lanhuimage1: right_icon,
        },
        {
          lanhuimage0: icon_2,
          lanhutext0: '关于我们',
          lanhutext1: 'V0.01',
          lanhuimage1: right_icon,
        },
      ],
      constants: {},
      showTabBar: true,
      popupType: '', // ['loginout', 'language']
      language: 'zh-CN',
      lanList: [
        {
          label: '简体中文',
          value: 'zh-CN',
        },
        {
          label: '英语',
          value: 'en-US',
        },
      ]
    };
  },
  async onLoad() {
    await this.getUserInfo()
  },
  methods: {
    switchMenu(title) { 
      switch (title) {
        case '实验记录':
          uni.navigateTo({
            url: '/pages/my/record',
          });
          break;
        case '我的班级':
          uni.navigateTo({
            url: '/pages/my/myClass',
          });
          break;
        case '个人信息':
          uni.navigateTo({
            url: '/pages/my/userInfo',
          });
          break;
        case '系统语言':
          this.showPopup('language');
          break;
        case '关于我们':
          uni.navigateTo({
            url: '/pages/my/about',
          });
          break;
      }
    },
    showPopup(type) {
      this.popupType = type
      this.showTabBar = false
      this.$refs.popup.open('bottom')
    },
    closePopup() {
      this.$refs.popup.close()
      this.showTabBar = true
    },
    loginOut() {
      uni.setStorageSync('token', '');
      uni.setStorageSync('myProfile', null)
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    async getUserInfo() {
      let res = await this.API.MyProfile()
      this.name = res.real_name
      let info = await this.API.StudentMyStudentSummary()
      this.loopData0[0].lanhutext0 = info.student_experiment_with_homework_count
      this.loopData0[1].lanhutext0 = info.student_experiment_no_homework_count
      this.loopData0[2].lanhutext0 = info.class_count
      this.loopData1[0].lanhutext1 = `${info.student_experiment_with_homework_count} 条`
      this.loopData1[1].lanhutext1 = `${info.class_count} 个`
    },
    changeLanguage(lan) {
      this.language = lan
    },
    comfirmLan() {
      this.closePopup()
    }
  },
};
</script>
<style scoped lang="less">
  .popup-content {
    padding-top: 48rpx;
    .popup-header {
      padding: 0 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #262626;
      height: 50rpx;
      line-height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .close-icon{
        width: 40rpx;
        height: 40rpx;
        .close-icon-image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .popup-body {
      padding: 158rpx 56rpx 0 56rpx;
      height: calc(280rpx + env(safe-area-inset-bottom));
      .login-out-btn {
        width: 100%;
        height: 92rpx;
        background: #FF4D4F;
        color: #fff;
        border-radius: 12rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        text-align: center;
        line-height: 92rpx;
      }
    }
    .lan-box {
      padding: 0rpx 48rpx;
      padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
      .lan-select {
        height: 600rpx;
        padding-top: 32rpx;
        overflow-y: auto;
        .lan-select-item{
          height: 128rpx;
          width: 100%;
          background-color: #fff;
          box-shadow: inset 0px -1px 0px 0px #E6EBF1;
          position: relative;
          line-height: 128rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #000000;
          &.active {
            color: #2776FF;
            &::after {
              content: '';
              position: absolute;
              top: 44rpx;
              right: 0;
              width: 40rpx;
              height: 40rpx;
              background: url('./img/checked.png');
              background-size: 100% 100%;
            }
          }
        }
      }
      .lan-btn {
        width: 100%;
        height: 92rpx;
        background: #2776FF;
        color: #fff;
        border-radius: 12rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        text-align: center;
        line-height: 92rpx;
      }
    }
  }
  .page {
    background-color: rgba(248, 248, 248, 1);
    position: relative;
    width: 750rpx;
    height: 100%;
    overflow: hidden;
  }
  
  .block_1 {
    background-color: rgba(255, 255, 255, 1);
    padding: 28rpx 28rpx 22rpx 42rpx;
  }
  
  .box_1 {
  }
  
  .text-wrapper_3 {
    width: 108rpx;
    height: 40rpx;
    overflow-wrap: break-word;
    font-size: 0;
    letter-spacing: -0.2800000011920929px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    line-height: 40rpx;
  }
  
  .text_9 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
  }
  
  .text_10 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
  }
  
  .thumbnail_7 {
    width: 34rpx;
    height: 22rpx;
    margin: 8rpx 0 10rpx 438rpx;
  }
  
  .thumbnail_8 {
    width: 30rpx;
    height: 22rpx;
    margin: 6rpx 0 12rpx 10rpx;
  }
  
  .image_3 {
    width: 50rpx;
    height: 24rpx;
    margin: 6rpx 0 10rpx 10rpx;
  }
  
  .box_2 {
    width: 666rpx;
    margin: 42rpx 12rpx 0 2rpx;
  }
  
  .thumbnail_9 {
    width: 40rpx;
    height: 40rpx;
    margin: 2rpx 0 10rpx 0;
  }
  
  .text_3 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    line-height: 52rpx;
  }
  
  .thumbnail_4 {
    width: 40rpx;
    height: 8rpx;
    margin: 22rpx 0 22rpx 0;
  }
  
  .group_5 {
    padding-bottom: 26rpx;
  }
  
  .group_3 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    width: 750rpx;
    justify-content: flex-center;
    padding: 24rpx 32rpx 24rpx 32rpx;
  }
  
  .image-wrapper_1 {
    background-color: rgba(238, 237, 237, 1);
    border-radius: 50%;
  }
  
  .label_8 {
    width: 92rpx;
    height: 92rpx;
  }
  
  .text-group_10 {
    margin-left: 24rpx;
  }
  
  .text_4 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
    margin-right: 216rpx;
  }
  
  .text_5 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 32rpx;
    margin-top: 8rpx;
  }
  
  .label_2 {
    width: 76rpx;
    height: 76rpx;
    margin: 8rpx 0 8rpx 206rpx;
  }
  
  .group_4 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    align-self: center;
    margin-top: 24rpx;
    width: 702rpx;
    padding: 24rpx 72rpx 24rpx 72rpx;
  }
  
  .list_3 {
    width: 558rpx;
    height: 104rpx;
    justify-content: space-between;
  }
  
  .text-group_11 {
    margin-right: 136rpx;
  }
  
  .text_6 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 44rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 56rpx;
    margin: 0 22rpx 0 20rpx;
  }
  
  .text_7 {
    overflow-wrap: break-word;
    color: rgba(140, 140, 140, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 12rpx;
  }
  
  .block_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    align-self: center;
    margin-top: -2rpx;
    width: 702rpx;
    padding: 24rpx 32rpx 24rpx 32rpx;
  }
  
  .list_4 {
    height: 540rpx;
  }
  
  .list-items_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 638rpx;
    padding: 32rpx 0 32rpx 0;
  }
  
  .image-text_8 {
    width: 184rpx;
  }
  
  .thumbnail_5 {
    width: 40rpx;
    height: 40rpx;
    margin: 2rpx 0 2rpx 0;
  }
  
  .text-group_3 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
  }
  
  .image-text_9 {
    width: 122rpx;
    margin: 2rpx 0 2rpx 0;
  }
  
  .text-group_4 {
    width: 112rpx;
    overflow-wrap: break-word;
    color: rgba(140, 140, 140, 1);
    font-size: 28rpx;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
  }
  
  .thumbnail_10 {
    width: 32rpx;
    height: 32rpx;
    margin: 4rpx 0 4rpx 0;
  }
  
  .text-wrapper_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 12px;
    align-self: center;
    margin-top: 24rpx;
    width: 702rpx;
    padding: 24rpx 288rpx 24rpx 286rpx;
  }
  
  .text_8 {
    overflow-wrap: break-word;
    color: rgba(38, 38, 38, 1);
    font-size: 32rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 44rpx;
  }
  
  .block_4 {
    box-shadow: inset 0px 0px 0px 0px rgba(230, 235, 241, 1);
    background-color: rgba(255, 255, 255, 1);
    width: 750rpx;
    margin-top: 216rpx;
    justify-content: flex-center;
    padding: 16rpx 52rpx 0 52rpx;
  }
  
  .image-text_10 {
  }
  
  .label_3 {
    width: 60rpx;
    height: 60rpx;
  }
  
  .text-group_5 {
    overflow-wrap: break-word;
    color: rgba(140, 140, 140, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 32rpx;
    align-self: center;
    margin-top: 8rpx;
  }
  
  .image-text_11 {
    margin-left: 88rpx;
  }
  
  .label_4 {
    width: 60rpx;
    height: 60rpx;
  }
  
  .text-group_6 {
    overflow-wrap: break-word;
    color: rgba(140, 140, 140, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 32rpx;
    align-self: center;
    margin-top: 8rpx;
  }
  
  .image-text_12 {
    margin-left: 84rpx;
  }
  
  .label_5 {
    width: 60rpx;
    height: 60rpx;
    margin: 0 6rpx 0 4rpx;
  }
  
  .text-group_7 {
    overflow-wrap: break-word;
    color: rgba(140, 140, 140, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 32rpx;
    margin-top: 8rpx;
  }
  
  .image-text_13 {
    margin-left: 82rpx;
  }
  
  .label_6 {
    width: 60rpx;
    height: 60rpx;
  }
  
  .text-group_8 {
    overflow-wrap: break-word;
    color: rgba(140, 140, 140, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 32rpx;
    align-self: center;
    margin-top: 8rpx;
  }
  
  .image-text_14 {
    margin-left: 82rpx;
  }
  
  .label_7 {
    width: 60rpx;
    height: 60rpx;
  }
  
  .text-group_9 {
    overflow-wrap: break-word;
    color: rgba(39, 118, 255, 1);
    font-size: 24rpx;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 32rpx;
    align-self: center;
    margin-top: 8rpx;
  }
  
  .image_2 {
    width: 750rpx;
    height: 68rpx;
  }
</style>
